<template>
  <view class="page">
    <view class="navbar" :style="'background-image: url('+pageBg+');'">
      <u-navbar @leftClick="navLeftClick" :fixed="false" title="首单体验专区" placeholder bgColor="transparent"></u-navbar>
    </view>
    <view class="goods-list" v-if="goodsList.length">
      <view class="goods-item" v-for="item in goodsList" :key="item.id" @click="jumpTo(`/pages/firstOrder/goodsDetail?id=${item.productId}&skuId=${item.id}`)">
        <image style="width: 180rpx;height: 180rpx;flex-shrink: 0;border-radius: 8rpx 0rpx 0rpx 8rpx;" :src="item.subtitle?item.subtitle.split(',')[0]:''" mode="aspectFill" />
        <view class="u-flex-1 u-flex u-flex-column u-col-top u-row-between">
          <view class="name u-line-2">{{ item.title }}-{{ item.skuName }}</view>
          <view class=" u-flex u-row-between" style="width: 100%;">
            <view class="price"><text>¥</text> {{ item.priceCents }}</view>
            <view class="num">仅剩{{ item.stock }}件</view>
          </view>
        </view>
      </view>
    </view>
    <a-empty v-else></a-empty>
  </view>
</template>

<script>
import pageBg from '../../static/firstOrder.png'
import { getGoodsSpecList } from '@/api/index'

export default {
  data() {
    return {
      pageBg,
      goodsNum: 1,
      goodsList: [],
      pages: 0,
    };
  },
  async onLoad() {
    await this.getGoodsSpec()
  },
  methods: {
    // 商品列表
    async getGoodsSpec() {
      uni.showLoading({ mask: true })
      await getGoodsSpecList({pageNum: this.goodsNum, pageSize: 20, firOrderStatus: 1,firOrderType:1}).then(res => {
        uni.hideLoading()
        this.goodsList = [...this.goodsList, ...res.rows]
        this.pages = Math.ceil(res.total / 20)
      })
    },
  },
  onReachBottom() {
    if(this.goodsNum < this.pages) {
      this.goodsNum++
      this.getGoodsSpec()
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .navbar {
    background-repeat: no-repeat;
    background-size: 750rpx auto;
    background-position: bottom;
    margin-bottom: 20rpx;
  }
  .goods-list {
    width: 704rpx;
    display: flex;
    flex-direction: column;
    gap: 14rpx;
    margin: 0 auto;
    .goods-item {
      width: 100%;
      height: 180rpx;
      background: #fff;
      border-radius: 12rpx;
      display: flex;
      gap: 20rpx;
      padding: 0 28rpx 16rpx 0;
      .name {
        padding-top: 14rpx;
        font-size: 28rpx;
        color: #000000;
        line-height: 44rpx;
      }
      .price {
        font-weight: 500;
        font-size: 28rpx;
        color: #E20300;
        text {
          font-size: 24rpx;
        }
      }
      .num {
        font-size: 24rpx;
        color: #818181;
      }
    }
  }
}
</style>
